<template>
    <view class="content">
        <view class="base_info">
            <view class="row flex_b">
                <view class="row_l">工种</view>
                <view class="row_r">{{ orderDetail.workType }}</view>
            </view>
            <view class="row flex_b">
                <view class="row_l">用工时间</view>
                <view class="row_r">{{ orderDetail.workDate }}</view>
            </view>
            <view class="row flex_b">
                <view class="row_l">用工地点</view>
                <view class="row_r">{{ orderDetail.workPlace }}</view>
            </view>
        </view>
        <view class="base_info">
            <view class="row flex_b">
                <view class="row_l">付费模式</view>
                <view class="row_r" style="color: #FE6E04;">{{ orderDetail.feeType == 1 ? '一口价' : '计件' }}</view>
            </view>
            <view class="row flex_b">
                <view class="row_l">需要人数</view>
                <view class="row_r">{{ orderDetail.peopleNum }}人</view>
            </view>
            <view class="row flex_b">
                <view class="row_l">我愿出价<text>（总价）</text></view>
                <view class="row_r">{{ orderDetail.money }}元</view>
            </view>
            <view class="row flex_b add" v-if="payAmount > 0">
                <view class="row_l">本次加价</view>
                <view class="row_r">{{ payAmount }}元</view>
            </view>
            <view class="row flex_b" v-else>
                <view class="row_l" style="color: #ff382e;">*我愿加价</view>
                <view class="row_r">
                    <up-input inputAlign="right" focus type="digit" placeholder="输入金额" border="none"
                        v-model="form.money" @blur="onBlur">
                        <template #suffix>
                            <view class="suffix">元</view>
                        </template>
                    </up-input>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view class="bottom_btn">
            <view class="btn flex_c" @click="add" v-if="payId == 0">加价</view>
            <view class="btn flex_c" @click="pay" v-else>确认支付</view>
        </view>
        <!-- 加价提示 -->
        <up-modal showCancelButton :show="showModal" title="加价提示" @confirm="confirm" @cancel="showModal = false">
            <view>本次加价的金额为<text style="color: red;">{{ form.money }}</text>元</view>
        </up-modal>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addPrice } from "@/api/customerPage/order";
import { useOrder } from "@/hooks/useOrder";
import { usePay } from "@/hooks/usePay";

const { orderDetail, getOrderInfo } = useOrder()
const { payId, payAmount, getPayOrderInfo, submitPay } = usePay()

onLoad((options: any) => {
    const { id } = options
    if (id) {
        // 查询订单详情
        getOrderInfo(id)
        // 查询支付id
        getPayOrderInfo(id)
    }
})

const form = reactive({
    money: 0
})

// 价钱不能低于0
const onBlur = () => {
    form.money = Math.max(0, form.money as number)
}

const showModal = ref(false)
// 加价
const add = () => {
    if (!form.money) {
        uni.showToast({
            title: '请输入加价金额',
            icon: 'none'
        })
        return
    }
    showModal.value = true
}
// 确定加价
const confirm = () => {
    showModal.value = false
    const par = {
        id: orderDetail.value.id,
        money:form.money,
        pay: form.money,
        couponId: orderDetail.value.couponId ?? '',
    }
    addPrice(par).then((res) => {
        console.log(res);
        
        uni.showToast({
            title: '加价成功',
            icon: 'none'
        })
        getPayOrderInfo(orderDetail.value.id as string)
        uni.showLoading({
            title: '请求支付中...',
        })
        setTimeout(() => {
            uni.hideLoading()
            submitPay()
        }, 500)
    })
}
// 支付
const pay = (async () => {
    submitPay()
})
</script>

<style lang="scss" scoped>
.content {
    padding-bottom: 200rpx;
    box-sizing: border-box;
}

.base_info {
    width: 698rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 24rpx;
}

.row {
    width: 100%;
    min-height: 96rpx;
    border-bottom: 2rpx solid #F8F8F8;
    font-size: 28rpx;
    color: #222222;

    &_l {
        width: 35%;

        text {
            font-size: 24rpx;
            color: #888888;
        }
    }

    &_r {
        width: 65%;
        text-align: right;
    }
}


.add {
    color: #fe6e04;
    font-weight: 700;
    font-size: 32rpx;

    .row_r {
        color: #ff382e;
    }
}

.bottom_btn {
    width: 750rpx;
    height: 198rpx;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;

    .btn {
        width: 650rpx;
        height: 80rpx;
        background: #fe6e04;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #ffffff;
        margin: 0 auto;
        margin-top: 36rpx;
    }
}

:deep(.u-input) {
    background-color: #fff !important;
}
</style>